<template>
  <div class="connectUs-content p-4">
    <!--联系我们-->
    <el-row class="pb-5">
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="flex title-content justify-center pt-5 pb-10">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">联系我们</h3>
          <span class="mt-5"></span>
        </div>
        <div v-if="isShow" class="connectUs-info">
          <div class="pb-3">
            <span class="pr-3 phone-icon"
              ><el-icon><Phone /></el-icon
            ></span>
            <span>{{ baseInfo.phone }}</span>
          </div>
          <div class="pb-3">
            <span class="pr-3"> <svg-icon icon-class="email" /></span>
            <span>{{ baseInfo.email }}</span>
          </div>
          <div class="pb-3">
            <span class="pr-3"><svg-icon icon-class="web" /></span>
            <span>{{ baseInfo.webUrl }}</span>
          </div>
          <div class="pb-3">
            <span class="pr-3"><svg-icon icon-class="address" /></span>
            <span>{{ baseInfo.address }}</span>
          </div>
        </div>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>
    <el-row>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
        <div class="flex title-content justify-center pt-5 pb-10">
          <span class="mt-5"></span>
          <h3 class="pr-4 pl-4">在线留言</h3>
          <span class="mt-5"></span>
        </div>
        <div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入您的姓名" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model.number="ruleForm.phone"
                placeholder="请输入您的联系电话"
                type="number"
              />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email" placeholder="请输入您的邮箱" />
            </el-form-item>
            <el-form-item label="需求" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请填写需求">
                <el-option
                  v-for="item in locationOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="其他留言" prop="desc">
              <el-input v-model="ruleForm.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-row class="w-full text-center">
                <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
                <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14">
                  <div class="m-auto">
                    <el-button
                      type="primary"
                      class="w-full h-full"
                      @click="submitForm(ruleFormRef)"
                    >
                      提交用卡咨询
                    </el-button>
                  </div>
                </el-col>
                <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
                <!-- <el-col :span="12">
                  <div class="w-40 m-auto">
                    <el-button class="w-full" @click="resetForm(ruleFormRef)"
                      >重置</el-button
                    >
                  </div>
                </el-col> -->
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :md="5" :lg="5" :xl="5" hidden-md-and-down></el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { companyBaseInfo } from "@/api/base_info";
import { needCardList } from "@/api/connect_us";

const isShow = ref(false);

const baseInfo = ref({});
const locationOptions = ref([]);
const getBaseInfo = () => {
  companyBaseInfo().then((res) => {
    baseInfo.value = res.data;
    isShow.value = true;
  });
};
const getNeedList = () => {
  needCardList().then((res) => {
    console.log("needList", res);
    locationOptions.value = res.data.list;
  });
};

interface RuleForm {
  name: string;
  phone: string;
  email: string;
  region: string;
  desc: string;
}

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  phone: "",
  string: "",
  region: "",
  desc: "",
});

// 邮箱校验
const validate_email = (rule, value, callback) => {
  var emailRegExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
  var emailRegExp1 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  if (
    (!emailRegExp.test(value) && value != "") ||
    (!emailRegExp1.test(value) && value != "")
  ) {
    callback(new Error("请输入有效邮箱格式！"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入您的名字", trigger: "blur" },
    { min: 3, max: 5, message: "名字长度在3到5个字符", trigger: "blur" },
  ],
  phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号格式",
      trigger: "blur",
    },
    { min: 11, max: 11, message: "电话号码的长度在11位", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { validator: validate_email, trigger: ["blur"] },
  ],
  region: [
    {
      required: true,
      message: "请输入您的需求",
      trigger: "change",
    },
  ],

  desc: [
    { required: true, message: "请输入您其他需求方面的留言", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("正确提交!");
    } else {
      console.log("错误提交!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

onMounted(() => {
  getBaseInfo();
  getNeedList();
});
</script>

<style lang="scss" scoped>
.connectUs-content {
  font-size: var(--text-primary-size);
  .title-content {
    color: var(--color-text-title);

    span {
      width: 40px;
      height: 1px;
      background-color: var(--color-text-title);
    }
    h3 {
      font-size: var(--text-h3-size);
    }
  }
  .connectUs-info {
    color: var(--color-text-title);
    font-size: var(--text-primary-size);
  }
  .phone-icon {
    position: relative;
    top: 3px;
  }
}
:deep(.el-input__wrapper) {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1rem;
  margin-top: 1rem;
}
:deep(.el-form-item__label-wrap) {
  margin-top: 2rem;
}
:deep(.el-select__wrapper) {
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 1rem;
  margin-top: 1rem;
}
:deep(.el-textarea__inner) {
  padding: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 1rem;
  margin-top: 1rem;
}
.el-button,
.el-button.is-round {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  margin-top: 1rem;
  font-size: var(--text-primary-size);
}
.el-button--primary {
  background-color: var(--color-primary);
  border: none;
}
.el-button--primary:hover {
  background-color: #ffc51c;
}
</style>
